<template>

    <article style="display: flex;flex-direction: column;flex: 1">
      <section  style="overflow:hidden" class="flex flex-sub">
        <CurdTable ref="tableRef"
                   :get-data="api.appointment.list"
                   :columns="columns"
                   :and-params="andParams"
                   :or-params="orParams"
                   :order-params="orderParams">
        </CurdTable>
      </section>
    </article>

</template>

<script setup lang="ts">
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref} from "vue";
import api from '@/api'
import {NButton, NEllipsis, NTag, NText} from "naive-ui";
import {getAppointmentStatus, getAppointmentStatusColor, getAppointmentTagType, getAppointmentType} from "@/utils";
import myMoment from "@/utils/common/myMoment";
import router from "@/router";


/** QueryBar筛选参数（可选） */
const orParams = ref({
  id: '',
  patientName: '',
  nurseName: '',
})
/** 补充参数（可选） */
const andParams = ref({})
/** 排序参数(可选）*/
const orderParams = ref({
  updateTime: '',
  createTime:'',
})
const loading = ref()
const tableRef = ref()
const searchKey = ref('')
const sortKey = ref('2')

const columns = ref([
  {title: '预约编号', key: 'id', width: 3, ellipsis: {tooltip: true}},
  {
    title: '状态', key: 'status', width:4, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {
        style: {
          fontSize: '14px',
          color: getAppointmentStatusColor(row.status)
        }
      }, {default: () => '●'+getAppointmentStatus(row.status)})
    }
  },
  {
    title: '类型', key: 'type', width: 4, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NTag, {
        style: {fontSize: '14px'},
        type: getAppointmentTagType(row.type)
      }, {default: () => getAppointmentType(row.type)})
    }
  },
  {
    title: '姓名', key: 'patientName', width: 4, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.patientName})
    }
  },
  {
    title: '看诊医生', key: 'nurseName', width:4, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.nurseName})
    }
  },

  {
    title: '最后更新时间', key: 'updateTime', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.updateTime).format("MMMDo H:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.updateTime).startOf('minute').fromNow()}),
      ])
    }
  },

])

onMounted(() => {
  search()
})

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '1') {
    orderParams.value.createTime = '1'
  } else if (sortKey.value === '2') {
    orderParams.value.createTime = '2'
  } else {
    orderParams.value.createTime = ''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}

const handleResult=(row:any)=>{
  router.push({
    path:'/appointment/result',
    query:{
      appointmentInfo:encodeURIComponent(JSON.stringify(row))
    }
  })
}


</script>

<style scoped>

</style>